import '@/assets/css/red-package.css'
import redpackageImg from '@/assets/images/redpackage.png'
import lodash from 'lodash'
export default class RedPackage{


    constructor(config) {
        config=config||{}
        this.img_parent=config.parent||document.body
        this.onClickRedPackage=config.onClickRedPackage
        this.duration=lodash.random(3,8,true)*1000
        this.rotate=lodash.random(-360,360,false)
        this.rotateStart=lodash.random(-360,360,false)
        this.rotateEnd=lodash.random(-360,360,false)
        this.left=lodash.sample([10,20,30,40,50,60,70,80,90])
        this.startDown()
    }

    startDown(){

        this.img=document.createElement("img")
        this.img.src=redpackageImg
        this.img.className='red-package'
        this.img.style.position='absolute'
        this.img.style.left=this.left+'vw'
        this.img.animate([
            {
                transform:`translateY(-10vh) rotate(${this.rotateStart}deg)`
            },
            {
                transform:`translateY(110vh) rotate(${this.rotateEnd}deg)`
            }
        ],{
            duration:this.duration
        })
        this.img.onclick=this.handleClickImage.bind(this)
        this.img_parent.appendChild(this.img)

        this.handleRemove()
    }

    handleClickImage(){
        this.onClickRedPackage()
        this.img.remove()
    }

    handleRemove(){
        setTimeout(()=>{
            this.img.remove()
        },this.duration)
    }
    static  create(config){
        return new RedPackage(config)
    }
}